<template>
	<view>
		<view class="search-box">
			<my-search :bgcolor="'pink'" :radius="18" @click="gotoSearch"></my-search>
		</view>
		<!-- 首页轮播图（广告） -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<navigator class="swiper-item">
					<img :src="item.pic" />
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类导航 -->
		<view class="nav-list">
			<view v-for="(item,i) in categoryList">
				<image :src="item.pic" class="nav-img" alt="" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue'
	export default {
		setup() {
			const swiperList = ref([]);
			const categoryList = ref([]);

			const getSwiperList = async () => {
				const {
					data: rs
				} = await uni.$http.get('/mall-contents/content/queryContentByCategoryId/1')
				swiperList.value = rs.data
			}

			const getCategoryList = async () => {
				const {
					data: rs
				} = await uni.$http.get('/mall-contents/content/queryContentByCategoryId/6')
				categoryList.value = rs.data
			}

			const gotoSearch = () => {
				uni.navigateTo({
					url: '/subPackages/search/search'
				})
			}

			onMounted(() => {
				getSwiperList()
				getCategoryList()
			})

			return {
				swiperList,
				categoryList,
				gotoSearch
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-img {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor-title {
		height: 60rpx;
		width: 100%;
		display: flex;
	}

	.right-img-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.floor-img-box {
		display: flex;
		padding-left: 10rpx;
	}
</style>
